<template>
	<div id="scheduleDetail" style="padding:20px;">
		<div style="color: rgb(27, 76, 184);margin-bottom: 15px">
			<div class="addressIcon"></div>
			<span>当前位置：</span>
			<span style="cursor: pointer" @click="returnPage">班级列表</span>
			<Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
			<span style="color: #333">{{classInfo ? classInfo.className : ''}}</span>
			<Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
			<span style="color: #333">课程安排</span>
			<Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
			<span style="color: #333">{{courseDetail.courseName}}</span>
		</div>
		<div class="classStep">
			<template>
				<Steps :current="currentIndex" direction="vertical">
					<Step title="课前设置" @click.native="toPreCompeManage" content="提供教学环境的部署，批量部署功能，提供教学环境部署状态，教学人员的在线状态、接入状态等的展示和监控" :class="{curStep : courseStatus == 1}" :icon="courseStatus == 1 ? 'ios-refresh-circle':''"></Step>
					<Step title="课中管理" @click.native="toCompeingManage" content="提供教学环境的销毁，批量销毁，进入教学环境和查看投屏等功能，提供教学环境部署状态，教学人员的在线状态、接入状态等的展示和监控" :class="{curStep : courseStatus == 2}" :icon="courseStatus == 2 ? 'ios-refresh-circle':''"></Step>
					<Step title="课后归档" @click.native="toCompeedManage" content="提供教学环境的销毁，批量销毁功能，提供答题记录，视频学习，报告的管理和统计" :class="{curStep : courseStatus == 3}" :icon="courseStatus == 3 ? 'ios-refresh-circle':''"></Step>
				</Steps>
			</template>
			<!-- 整个排课的倒计时 -->
			<!-- <div class="countdown" v-if="courseStatus != 3">
				<template v-if="disableCountdown">暂停中</template>
				<template v-else>
					<span v-if="courseStatus == 1">开始</span><span v-if="courseStatus != 1">结束</span>倒计时：
					<b><span>{{time.h}}</span>:<span>{{time.m}}</span>:<span>{{time.s}}</span>
					</b>
				</template>
			</div> -->
			<!-- 按课节显示状态和倒计时 -->
			<div class="countdown" v-if="curClassNumberInfo && curClassNumberInfo.state != 3">
				<template v-if="curClassNumberInfo.state == 4">暂停中</template>
				<template v-else>
					<span v-if="curClassNumberInfo.state == 0">课节开始</span><span v-if="curClassNumberInfo.state == 2">课节结束</span>倒计时：
					<b><countdown @change-status="getDrillDetail" :startTime="curClassNumberInfo.startTime" :endTime="curClassNumberInfo.endTime"></countdown>
					</b>
				</template>
			</div>
			<div style="position:absolute;right:30px;bottom:30px;display: flex;" v-if="showChat || showVoice">
				<!-- <Button v-if="showVoice" type="primary" size="small" @click="turnToVoiceSites" style="margin-right:10px;">语音互动</Button> -->
				<Icon v-if="showVoice && voiceUrl" @click="turnToVoiceSites" type="ios-mic-outline" size="30" title="语音互动" style="margin-right:10px;"/>
				<ChatRoom v-if="classInfo.id && showChat" title="聊天" :classId="classInfo.id" :teacherName="classInfo.teacherName" :teacherId="classInfo.teacherId"></ChatRoom>
			</div>
		</div>
		<Row v-if="!compeedManagePanelShow" style="background:#fff;padding:20px;">
			<Col span="4" style="width:18%">
			<Card :dis-hover="false" style="height: calc(100% - 30px);">
				<p slot="title">
					课节信息
				</p>
				<TimelineItem v-for="(classNumber,index) in  classNumberList" :key="index" :color="setColor(classNumber)" @click.native="getEnvironData(classNumber)" style="cursor:pointer">
					<div slot="dot" class="timelineHeader activeProcess" v-if="new Date(classNumber.startTime).getTime() < serveTime && new Date(classNumber.endTime).getTime() > serveTime">
					</div>
					<div slot="dot" class="timelineHeader" :class="{active:curClassNumber == classNumber.classNumberId}" v-else>{{index+1}}</div>
					<p class="time">
						<span>{{classNumber.startTime.split(" ")[1]}} - {{classNumber.endTime.split(" ")[1]}}</span>
						<!-- <small v-if="classNumber.state == 0 || classNumber.state == 2">
							<small style="font-weight: normal;">{{ classNumber.state == 0 ? '开始' : '结束'}}倒计时：</small>
							<countdown style="color:red" :startTime="classNumber.startTime" :endTime="classNumber.endTime"></countdown>
						</small> -->
						<small :style="{color:filterStatus(classNumber).color}">{{ filterStatus(classNumber).txt }}</small>
					</p>
					<div class="content">
						<Tooltip v-for="exp in classNumber.expDto" :transfer="true" :key="exp.id" :max-width="160" style="width:100%" :content="exp.expName">
        			<p class="pExpName">{{exp.expName}}</p>
    				</Tooltip>
					</div>
				</TimelineItem>
			</Card>
			</Col>
			<Col span="19" style="width:80%;margin-left:2%;">
			<Card :dis-hover="false" style="height: calc(100% - 30px);">
				<p slot="title">
					课节环境信息<span style="color:#f90;margin-left:10px;"> <Icon type="ios-information-circle-outline" style="margin-top:-3px;"/>排课环境在课前{{autoDeployTime}}小时自动部署，课后{{autoDestroyTime}}小时自动销毁</span>
				</p>
				<a href="#" slot="extra">
					<RadioGroup v-model="classInfo.status" type="button" size="small" v-if="classInfo.type == '3' && currentIndex == 1" @on-change="updateClassStatus">
						<Radio label="1" :disabled="setReBtnStatus()">讲课</Radio>
						<Radio label="0" :disabled="setReBtnStatus()">实操</Radio>
					</RadioGroup>
				</a>
				<EnvironManagement 
					v-if="!compeedManagePanelShow && classInfo.id && classNumberInfo.classNumberId"
					:classNumberInfo="classNumberInfo" 
					:classInfo="classInfo" 
					:step="currentIndex" 
					@getTeacherConnected="getTeacherConnected " 
					@change-state="changeState"
					:classNumberId="curClassNumber"
					:countDownClassNumberId="countDownClassNumberId"
					:disbledAllBtn="setReBtnStatus()"
					class="course-environ" >
				</EnvironManagement>
			</Card>
			</Col>
		</Row>
		<Tabs class="demo-tabs-style2" @on-click="changeEndTab" :value="endDefault" v-if="compeedManagePanelShow">
			<TabPane label="环境信息" name="environInfo">
				<Row>
					<Col span="4">
					<Card :dis-hover="false">
						<p slot="title">
							课节信息
						</p>
						<TimelineItem v-for="(classNumber,index) in  classNumberList" :key="index" :color="setColor(classNumber)" @click.native="getEnvironData(classNumber)" style="cursor:pointer">
							<div slot="dot" class="timelineHeader activeProcess" v-if="new Date(classNumber.startTime).getTime() < serveTime && new Date(classNumber.endTime).getTime() > serveTime">
								
							</div>
							<div slot="dot" class="timelineHeader" :class="{active:curClassNumber == classNumber.classNumberId}" v-else>{{index+1}}</div>
							<p class="time"><span>{{classNumber.startTime.split(" ")[1]}} - {{classNumber.endTime.split(" ")[1]}}</span><small :style="{color:filterStatus(classNumber).color}">{{ filterStatus(classNumber).txt }}</small></p>
							<p class="content">
								<!-- <p v-for="exp in classNumber.expDto">{{exp.expName}}</p> -->
								<Tooltip v-for="exp in classNumber.expDto" :transfer="true" :key="exp.id" :max-width="160" style="width:100%" :content="exp.expName">
									<p class="pExpName">{{exp.expName}}</p>
								</Tooltip>
							</p>
						</TimelineItem>
					</Card>
					</Col>
					<Col span="19" style="margin-left:2%;">
					<Card :dis-hover="false">
						<p slot="title">
							课节环境信息<span style="color:#f90;margin-left:10px;"> <Icon type="ios-information-circle-outline" style="margin-top:-3px;"/>排课环境在课前{{autoDeployTime}}小时自动部署，课后{{autoDestroyTime}}小时自动销毁</span>
						</p>
						<a href="#" slot="extra" @click.prevent="changeLimit">

						</a>
						<EnvironManagement 
							v-if="endDefault == 'environInfo' && classInfo.id && classNumberInfo.classNumberId"
							:classNumberInfo="classNumberInfo" 
							:classInfo="classInfo" 
							:step="currentIndex" 
							:notAllowDeploy="notAllowDeploy" 
							:classNumberId="curClassNumber"
							:countDownClassNumberId="countDownClassNumberId"
							:disbledAllBtn="setReBtnStatus()"
							@change-state="changeState"
							class="course-environ" >
						</EnvironManagement>
					</Card>
					</Col>
				</Row>
			</TabPane>
			<TabPane label="答题记录" name="questionRecord">
				<Row>
					<Col span="4">
					<Card :dis-hover="false">
						<p slot="title">
							课节信息
						</p>
						<TimelineItem v-for="(classNumber,index) in  classNumberList" :key="index" :color="setColor(classNumber)" @click.native="getEnvironData(classNumber)" style="cursor:pointer">
							<div slot="dot" class="timelineHeader activeProcess" v-if="new Date(classNumber.startTime).getTime() < serveTime && new Date(classNumber.endTime).getTime() > serveTime">
							
							</div>
							<div slot="dot" class="timelineHeader" :class="{active:curClassNumber == classNumber.classNumberId}" v-else>{{index+1}}</div>
							<p class="time"><span>{{classNumber.startTime.split(" ")[1]}} - {{classNumber.endTime.split(" ")[1]}}</span><small :style="{color:filterStatus(classNumber).color}">{{ filterStatus(classNumber).txt }}</small></p>
							<p class="content">
								<p v-for="exp in classNumber.expDto">{{exp.expName}}</p>
							</p>
						</TimelineItem>
					</Card>
					</Col>
					<Col span="19" style="margin-left:2%;">
					<Card :dis-hover="false">
						<p slot="title">
							答题记录
						</p>
						<a href="#" slot="extra" @click.prevent="changeLimit">

						</a>
						<answerRecord 
							:classNumberId="curClassNumber" 
							v-if="endDefault == 'questionRecord'">
						</answerRecord>
					</Card>
					</Col>
				</Row>
			</TabPane>
			<TabPane label="视频学习统计" name="videoRecord">
				<Row>
					<Col span="4">
					<Card :dis-hover="false">
						<p slot="title">
							课节信息
						</p>
						<TimelineItem v-for="(classNumber,index) in  classNumberList" :key="index" :color="setColor(classNumber)" @click.native="getEnvironData(classNumber)" style="cursor:pointer">
							<div slot="dot" class="timelineHeader activeProcess"  v-if="new Date(classNumber.startTime).getTime() < serveTime && new Date(classNumber.endTime).getTime() > serveTime">
							
							</div>
							<div slot="dot" class="timelineHeader" :class="{active:curClassNumber == classNumber.classNumberId}" v-else>{{index+1}}</div>
							<p class="time">{{classNumber.startTime.split(" ")[1]}} - {{classNumber.endTime.split(" ")[1]}}</p>
							<p class="content">
								<p v-for="exp in classNumber.expDto">{{exp.expName}}</p>
							</p>
						</TimelineItem>
					</Card>
					</Col>
					<Col span="19" style="margin-left:2%;">
					<Card :dis-hover="false">
						<p slot="title">
							视频学习统计
						</p>
						<a href="#" slot="extra" @click.prevent="changeLimit">

						</a>
						<videoLearnStatictics :classNumberId="curClassNumber" v-if="endDefault == 'videoRecord'">
						</videoLearnStatictics>
					</Card>
					</Col>
				</Row>
			</TabPane>
			<TabPane label="报告评级" name="reportRecord">
				<Row>
					<Col span="4">
					<Card :dis-hover="false">
						<p slot="title">
							课节信息
						</p>
						<TimelineItem v-for="(classNumber,index) in  classNumberList" :key="index" :color="setColor(classNumber)" @click.native="getEnvironData(classNumber)" style="cursor:pointer">
							<div slot="dot" class="timelineHeader activeProcess" v-if="new Date(classNumber.startTime).getTime() < serveTime && new Date(classNumber.endTime).getTime() > serveTime">
						
							</div>
							<div slot="dot" class="timelineHeader" :class="{active:curClassNumber == classNumber.classNumberId}" v-else>{{index+1}}</div>
							<p class="time">{{classNumber.startTime.split(" ")[1]}} - {{classNumber.endTime.split(" ")[1]}}</p>
							<p class="content">
								<p v-for="exp in classNumber.expDto">{{exp.expName}}</p>
							</p>
						</TimelineItem>
					</Card>
					</Col>
					<Col span="19" style="margin-left:2%;">
					<Card :dis-hover="false">
						<p slot="title">
							报告评级
						</p>
						<a href="#" slot="extra" @click.prevent="changeLimit">

						</a>
						<reportScore :classNumberId="curClassNumber" :disbledAllBtn="setReBtnStatus()" v-if="endDefault == 'reportRecord'">
						</reportScore>
					</Card>
					</Col>
				</Row>
			</TabPane>
			<TabPane label="屏幕录制查看" name="recordingView">
				<RecordingList :classNumberInfo="classNumberInfo"  v-if="endDefault == 'recordingView'" ></RecordingList>
			</TabPane>
		</Tabs>
		<Modal v-model="boardModal" title="发送公告" :width="750" footer-hide>
			<board v-if="boardModal" @hideModal="hideModal" :userList="classInfo.stuList"></board>
		</Modal>
	</div>
</template>

<script>
	import encryption from '@/libs/encryption.js'
	import timer from '@/mixin/timer'
	import {
		getExperGroupsUsers
	} from '@/api/users'
	import {
		updateClassStatus,
		syncClassData,
		getClassUsers,
		getClassNumberDetail,
		queryTeachSchedule
	} from '@/api/selfStudy/class.js'
	import {disConnected} from '@/api/selfStudy/access.js'
	import {
		getDictInfoByName
	} from '@/api/dict.js'
	import RecordingList from './recordingList'
	import EnvironManagement from './environManagement-new'
	import board from '@/components/board-cast/classBoardcast.vue'
	import answerRecord from './answerRecord.vue'
	import videoLearnStatictics from './videoLearnStatictics.vue'
	import reportScore from './reportScore.vue'
	import ChatRoom from '@/components/chatRoom/classChatRoom.vue'
	import countdown from './countdown.vue'
	import classCommonFun from './classCommonFunMixin.js'

	export default {
		name: 'courseScheduleDetail',
		components: {
			EnvironManagement,
			board,
			answerRecord,
			videoLearnStatictics,
			reportScore,
			ChatRoom,
			RecordingList,
			countdown
		},
		mixins: [timer, classCommonFun],
		data() {
			let September = sessionStorage.getItem('November')
			September = JSON.parse(encryption.SelfUseDecrypt(September))
			return {
				USER_ID: September.userId,
				USER_Name: September.nickname,
				courseDetail: {},
				currentIndex: 0,
				preCompeManagePanelShow: true,
				compeingManagePanelShow: false,
				compeedManagePanelShow: false,
				endDefault: '',
				courseStatus: '',
				backObj: {
					path: '/class',
					name: 'class',
					query: {
						page: this.$route.query.page,
					},
					meta: {
						requireAuth: true,
					},
				},
				timeoutP: {},
				timeout: {},
				boardModal: false,
				classNumberList: [],
				classNumberInfo: {
					expList: [],
					stuList: []
				},
				classInfo: {},
				curClassNumber: '',
				curClassNumberInfo:'',
				countDownClassNumberId: '',
				notAllowDeploy: false,
				showChat: 0,
				showVoice:0,
				voiceUrl:'',
				autoDeployTime: 2,
				autoDestroyTime: 24,
				disbledAllBtn: false,
				disableCountdown: false
			}
		},
		filters: {
			
		},
		beforeDestroy() {
			clearTimeout(this.timeout);
			clearTimeout(this.timeoutP);
			clearTimeout(this.setTimeInter);
		},
		beforeRouteLeave(to, from, next) {
			sessionStorage.removeItem('courseDetailParams');
			if(to.path === '/class') {
				//to.query.page = this.$route.query.page
				next()
			} else {
				//跳转至非教学班页面，清空存储的查询条件
				sessionStorage.removeItem("queryObj");
				next()
			}
		},
		watch: {
			courseStatus(val, oldVal) {
				if(val != oldVal && oldVal) {
					this.getCourseDetail(true, true);
				}
			},
			serveTime(newVal) {
				this.classNumberList.forEach(item => {
					if (item.state == 2 && new Date(item.startTime).getTime() < newVal && new Date(item.endTime).getTime() > newVal) {
						if (this.curClassNumber && this.curClassNumber !== item.classNumberId) { // 已选中其他课节，不做任何处理，避免跳转回当前课节
							return
						}
						this.getEnvironData(item)
						this.countDownClassNumberId = item.classNumberId
					}
					if (item.state === 4) {
						this.disableCountdown = true // 有课节处于暂停状态，课程暂停
					}
				});
			},
			classNumberList(list) {
				// Promise.all(list.map(item => getClassNumberDetail(item.classNumberId))).then(res => {
				// 	let warning = ''
				// 	this.classNumberStatusList = res.map(item => item.data);
				// 	res.forEach(item => {
				// 		if (item.code !== 1) {
				// 			warning = item.message
				// 		} else {
				// 			let data = item.data || {}
				// 			if (data.state === 4) {
				// 				this.disableCountdown = true // 有课节处于暂停状态，课程暂停
				// 			}
				// 		}
				// 	})
				// 	if (warning) {
				// 		this.$Message.warning(warning)
				// 	}
				// }).catch(() => {
				// 	this.$Message.error('查询课节详情异常')
				// })
			}
		},
		async mounted() {
			this.classId = this.$route.query.classId;
			this.courseId = this.$route.query.courseId;
			this.date = this.$route.query.date;
			if(this.$route.params.row) {
				// this.courseDetail = this.$route.params.row;
				this.classInfo = this.$route.params.classInfo;
				// this.classNumberList = this.courseDetail.classNumberList;
				sessionStorage.setItem('courseDetailParams', JSON.stringify(this.$route.params));
			} else if(sessionStorage.getItem('courseDetailParams')) {
				let courseDetailParams = JSON.parse(sessionStorage.getItem('courseDetailParams'));
				// this.courseDetail = courseDetailParams.row;
				this.classInfo = courseDetailParams.classInfo;
				// this.classNumberList = this.courseDetail.classNumberList;
				sessionStorage.setItem('courseDetailParams', sessionStorage.getItem('courseDetailParams'));
			} else {
				sessionStorage.removeItem('courseDetailParams');
				this.$router.go(-1)
			}
			await this.queryTeachSchedule(); //查询课节列表
			this.getEnvironData(this.classNumberList[0]);
			this.getCourseDetail(true, true);
			Promise.all([this.getExpGroupUsers(), this.getClassUsers()]).then(() => {
				let curStuIdList = this.classInfo.stuList.map(user => user.userId);
				if(JSON.stringify(curStuIdList.sort()) !== JSON.stringify(this.classInfo.prevStuIdList.sort())) {
					//同步因实验组人员改变导致的数据不一致问题
					this.syncClassData();
				}
			})
			// this.getServeTime(); //timer mixin
			this.getDictInfoByName();
			this.getAutoDeployTime();
			this.getAutoDestroyTime();
		},
		methods: {
			// 获取课节列表
			queryTeachSchedule() {
				return new Promise(resolve => {
					queryTeachSchedule({
						classId: this.classId,
						classCourseId: this.courseId,
						startTime:this.date + ` 00:00:00`,
						endTime:this.date + ` 23:59:59`,
						// classNumberId: this.courseDetail.classNumberList && this.courseDetail.classNumberList[0].classNumberId
					}).then(({ code, message, attribute = {} }) => {
						if(code === 1){
							let obj = this.dealClassNumberList(attribute.data) || [];
							this.courseDetail = obj[0]
							this.classNumberList = obj[0].classNumberList
							// 更新当前classNumberInfo信息
							let curClassNumberInfo = this.classNumberList.find(item => item.classNumberId === this.curClassNumber);
							this.curClassNumberInfo = curClassNumberInfo;
							let courseDetailParams = {
								// row: this.courseDetail,
								classInfo: this.classInfo
							}
							sessionStorage.setItem('courseDetailParams', JSON.stringify(courseDetailParams));
							resolve()
						} else {
							reject()
							this.$Message.error(message)
						}
					}).catch(() => {
						this.$Message.error('请求课节信息失败')
						reject()
					})
				})
			},
			// 覆盖timer.js中的getDrillDetail方法，用于在更新服务器时间时同步更新详情
			async getDrillDetail() {
				await this.queryTeachSchedule();
				this.getCourseDetail();
			},
			getExpGroupUsers() {
				if(!this.classInfo.egId) {
					return
				}
				return new Promise((resolve, reject) => {
					getExperGroupsUsers(this.classInfo.egId).then(data => {
						if(data.code == 1) {
							//						this.formValidate.userIdlist = data.data.map(user => user.userId);
							this.classInfo.stuCount = data.data.length;
							this.classInfo.stuList = data.data;
							resolve();
						} else {
							this.$Message.warning(data.message)
						}
					})
				})
			},
			getClassUsers() {
				if(!this.classInfo.id) {
					return
				}
				return new Promise((resolve, reject) => {
					getClassUsers({
						classId: this.classInfo.id
					}).then(data => {
						if(data.code == 1) {
							this.classInfo.prevStuIdList = data.attribute.stuIdList.filter(userId => userId != this.classInfo.teacherId);
							resolve();
						} else {
							this.$Message.warning(data.message)
						}
					})
				})
			},
			getCourseDetail(needChangeStep, needServiceTime) { //是否需要切换步骤,是否需要服务时间请求
				//if(new Date(this.courseDetail.start).getTime() > this.serveTime) {
				if(this.classNumberList.every(item => item.state === 0)){
					this.courseStatus = 1;
					if(needChangeStep) {
						this.toPreCompeManage();
					}
					if(needServiceTime) {
						this.getServeTime(new Date(this.courseDetail.start).getTime());
					}
					if(new Date(this.courseDetail.start).getTime() - this.serveTime > 48 * 60 * 60 * 1000) {
						this.notAllowDeploy = true;
					}
				// } else if(new Date(this.courseDetail.start).getTime() < this.serveTime && new Date(this.courseDetail.end).getTime() > this.serveTime) {
				} else if(this.classNumberList.some(item => item.state !== 3) && this.classNumberList.some(item => item.state === 3)){	
					this.courseStatus = 2;
					if(needChangeStep) {
						this.toCompeingManage();
					}
					if(needServiceTime) {
						this.getServeTime(new Date(this.courseDetail.end).getTime());
					}
				//} else if(new Date(this.courseDetail.end).getTime() < this.serveTime) {
				} else if(this.classNumberList.every(item => item.state === 4)) {	
					this.courseStatus = 3;
					if(needChangeStep) {
						this.toCompeedManage();
					}
					if(needServiceTime) {
						this.getServeTime(new Date(this.courseDetail.end).getTime());
					}
				}
			},
			setColor(classNumber) {
				if(new Date(classNumber.startTime).getTime() > this.serveTime) {
					return '#ccc'
				} else if(new Date(classNumber.startTime).getTime() < this.serveTime && new Date(classNumber.endTime).getTime() > this.serveTime) {
					return 'green'
				} else if(this.courseStatus == 3) {
					return '#ccc'
				}
			},
			changeEndTab(name) {
				this.endDefault = name;
				this.getEnvironData(this.classNumberList[0]);
			},
			toPreCompeManage() { //演练前设置页面
				this.endDefault = '';
				this.currentIndex = 0;
				this.getEnvironData(this.classNumberList[0]);
				setTimeout(() => {
					this.preCompeManagePanelShow = true;
					this.compeingManagePanelShow = false;
					this.compeedManagePanelShow = false;
				})
			},
			toCompeingManage() { //演练中
				if(this.courseStatus == 1) {
					return;
				}
				this.endDefault = '';
				this.currentIndex = 1;
				this.getEnvironData(this.classNumberList[0]);
				setTimeout(() => {
					this.preCompeManagePanelShow = false;
					this.compeingManagePanelShow = true;
					this.compeedManagePanelShow = false;
				})
			},
			toCompeedManage() { //演练后
				if(this.courseStatus != 3) {
					return;
				}
				this.endDefault = 'environInfo';
				this.currentIndex = 2;
				this.getEnvironData(this.classNumberList[0]);
				setTimeout(() => {
					this.preCompeManagePanelShow = false;
					this.compeingManagePanelShow = false;
					this.compeedManagePanelShow = true;
				})
			},
			getEnvironData(event) {
				this.curClassNumber = event.classNumberId;
				this.curClassNumberInfo = event;
				this.classNumberInfo = {
					'classNumberId': event.classNumberId,
//					'stuList': this.classInfo.stuList,
					'expList': event.expDto,
//					'courseId': this.courseDetail.courseId,
//					'classId': this.courseDetail.classId
				}
			},
			hideModal() {
				this.boardModal = false;
			},
			updateClassStatus(status) {
				updateClassStatus(this.classInfo.id, status).then(data => {
					if(data.code == 1) {
						this.$Message.info('操作成功');
						if(status == 0 && this.teacherConnected && this.teacherConnected.length > 0) {
							disConnected(this.teacherConnected[0].id,{
								subiect:false,
								observer:true
							}).then(data => {
								if(data.code == 1) {
									conosole.log(data.message);
								}
							})
						}
					} else {
						this.$Message.warning(data.message)
					}
				})
			},
			getTeacherConnected(connections) {
				this.teacherConnected = connections || [];
			},
			async changeState(type) {
				this.disableCountdown = type
				// if (!type) {
					// await this.queryTeachSchedule() // 暂停、停止后需要重新获取课节列表
					this.getDrillDetail()
				// }
			},
			returnPage() {
				this.$router.push(this.backObj);
			},
			getDictInfoByName() {
				getDictInfoByName({
					name: 'allowCommunicate'
				}).then(data => {
					if(data.code == 1) {
						this.showChat = data.attribute.data.value && this.classInfo.teacherId == this.USER_ID;
					} else {

					}
				})
				getDictInfoByName({
					name: 'allowVoice'
				}).then(data => {
					if(data.code == 1) {
						this.showVoice = Number(data.attribute.data.value) && this.classInfo.teacherId == this.USER_ID;
					} else {

					}
				})
				getDictInfoByName({
					name: 'voiceUrl'
				}).then(data => {
					if(data.code == 1) {
						this.voiceUrl = data.attribute.data.value;
					} else {

					}
				})
			},
			getAutoDeployTime() { //课件自动部署时间为课前几小时
				getDictInfoByName({
					name: 'courseAutoDeployTime'
				}).then(data => {
					if(data.code == 1) {
						this.autoDeployTime = data.attribute.data.value;
					} else {

					}
				})
			},
			getAutoDestroyTime() { //课件自动部署时间为课后几小时
				getDictInfoByName({
					name: 'courseExpDestroyTime'
				}).then(data => {
					if(data.code == 1) {
						this.autoDestroyTime = data.attribute.data.value;
					} else {

					}
				})
			},
			setReBtnStatus() {
				let userid = this.classInfo.teacherId;
				if(userid === this.USER_ID) { //|| this.isRootDesigner
					return false
				} else {
					return true
				}
			},
			//同步教学班操作员及排课数据
			syncClassData() {
				syncClassData(this.classInfo.id).then(data => {
					if(data.code == 1) {

					} else {

					}
				}).catch(error => {
					console.log(error);
				})
			},
			turnToVoiceSites(){
				window.openTrain(`${this.voiceUrl}${this.curClassNumber}`);
			},
			filterStatus(classNumber) {
				let status = classNumber.state;
				let txt, color;
				if (status === 0) {
					txt = '未开始';
					color = '#ccc';
				} else if (status === 2) {
					txt = '进行中';
					color = 'rgb(44, 210, 80)';
				} else if (status === 3) {
					txt = '已结束';
					color = '#ccc';
				} else if (status === 4) {
					txt = '暂停中';
					color = 'rgb(44, 210, 80)';
				}
				return { txt, color };
			},
		}
	}
</script>

<style scoped>
	.pExpName{
		width:100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.addressIcon {
		display: inline-block;
		height: 14px;
		width: 12px;
		background: url("../../../assets/globalIcon/addressIcon.png") no-repeat center;
		background-size: 100% 100%;
		margin-bottom: -1px;
	}
	/deep/.course-environ .demo-table-info-row > td {
		background: lightblue
	}
	
	.ivu-table-overflowX {
		overflow-x: hidden;
	}
	
	.classStep {
		position: relative;
		margin-bottom: 20px;
		background: #fff;
		padding: 20px;
		box-shadow: 0 1px 5px #ccc;
		border-radius: 5px;
	}
	
	/deep/.classStep .ivu-steps-item.ivu-steps-status-finish .ivu-steps-tail>i:after {
		background: #1563C2 ;
	}
	/deep/.classStep .ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner{
		border-color: #1563C2 ;
	}
	/deep/.classStep .ivu-steps-item.ivu-steps-status-process:not(.curStep) .ivu-steps-head-inner{
		border-color: #1563C2 ;
    	background-color:#1563C2 ;
	}
	/deep/.classStep .ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner >.ivu-steps-icon,
	/deep/.classStep .ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner span,
	/deep/.classStep .ivu-icon-ios-checkmark:before {
		color: #1563C2 
	}
	
	/deep/.curStep .ivu-steps-icon.ivu-icon.ivu-icon-ios-refresh-circle {
		font-size: 30px;
		width: 30px;
		height: 30px;
		margin-left: -6px;
		top: -2px;
		color: #19be6b!important;
		background: url('../../../assets/scene/scene-process.gif') no-repeat;
	}
	
	/deep/.curStep .ivu-steps-icon.ivu-icon.ivu-icon-ios-refresh-circle:before {
		content: ''
	}
	
	.content {
		padding-left: 5px;
	}
	.time {
		font-size: 14px;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.countdown{
    	position: absolute;
	    top: -15px;
	    right: 50%;
	    width: 256px;
	    height: 56px;
	    line-height: 56px;
	    text-align: center;
	    background: url('../../../assets/scene/countdown-bg.png') no-repeat center;
	    color: #fff;
	    transform: translateX(50%);
    }
    .countdown b{
    	font-size:16px;
    }
    
	.timelineHeader{
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		border: 1px solid;
		border-color: inherit;
		border-radius: 50%;
		position: relative;
		left: 10px;
	}
	
	.timelineHeader.active {
		border: none;
		background-color: #2d8cf0;
		color: #fff;
	}
	
	/deep/.timelineHeader.activeProcess {
		border: none;
		background: url('../../../assets/scene/drill-nb.gif') no-repeat;
		background-size: contain;
	}
</style>
